<template>
	<upper-navigation>社区交流</upper-navigation>
	<view id="community">
		<scroll-view class="navigation-bar" scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft"
			@scroll="scroll">
			<view @click="onClick(item.id,index)" class="item-bar" :class="{ 'active': dataSourse.ForumID === item.id }"
				v-for="(item , index) in dataSourse.ForumTree" :key="index">
				{{ item.title }}
			</view>
		</scroll-view>
		<view class="waterfall-container" @touchstart="touchStart" @touchend="touchEnd">

			<view class="left">
				<view class="content-container" v-for="(item,index) in dataSourse.LeftList" :key="index">
					<navigator :url="'./CommunityDetail?id=' + item.ID" class="content-item">
						<view class="content-header">
							<image :src=" domain + ( item.Creator.Avatar || '/default.png' ) " class="avatar" />
							<view class="creat">
								<view class="author">
									{{ item.Author }}
								</view>
								<view class="created-time">
									{{ item.CreatedOn }}
								</view>
							</view>
						</view>
						<image :src="domain + item.Cover" class="content-image" mode="widthFix" />
						<view class="content-text">
							{{item.Topic}}
						</view>
						<image :src=" domain + '/static/Community/rootBackImg.png'" class="bg-img" />
					</navigator>
				</view>
			</view>
			<view class="right">
				<view class="content-container" v-for="(item,index) in dataSourse.RightList" :key="index">
					<navigator :url="'./CommunityDetail?id=' + item.ID" class="content-item">
						<view class="content-header">
							<image :src=" domain + ( item.Creator.Avatar || '/default.png' ) " class="avatar" />
							<view class="creat">
								<view class="author">
									{{ item.Author }}
								</view>
								<view class="created-time">
									{{ item.CreatedOn }}
								</view>
							</view>
						</view>
						<image :src="domain + item.Cover" class="content-image" mode="widthFix" />
						<view class="content-text">
							{{item.Topic}}
						</view>
						<image :src=" domain + '/static/Community/rootBackImg.png'" class="bg-img" />
					</navigator>
				</view>
			</view>
		</view>
	</view>
	<navigator class="to-add" :url="'./AddCommunity?ForumId=' + dataSourse.ForumID" v-if="dataSourse.ForumID">
		+
	</navigator>
	<bottom-bar></bottom-bar>
</template>

<script setup>
	import upperNavigation from './upperNavigationNoline .vue'
	import bottomBar from './bottomNavigationBar.vue'
	import {
		ref,
		reactive,
		onMounted,
		watchEffect,
		nextTick
	} from "vue";
	import {
		domain
	} from '../../stores/useApp.js'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app';
	import setShare from '../../share.js'
	setShare({
		title: '云上埔坪 - 社区',
		path: "/pages/Community/CommunityCommunication"
	});
	const scrollLeft = ref(0);
	//帖子和导航栏数据结构
	const dataSourse = reactive({
		ForumID: '',
		ForumTree: [],
		LeftList: [],
		RightList: [],
		letfH: 0,
		rightH: 0,
		Page: 1,
		PageSize: 10,
	});
	let index = 0; //初始页面
	function scroll(event) {
		// console.log(event.detail.scrollLeft);
	}
	//加载内容
	onLoad((option) => {
		dataSourse.ForumID = option.id || '';
		index = option.index || 0;
		setShare({
			title: '云上埔坪 - 社区',
			path: `/pages/Community/CommunityCommunication?id=${option.id}`
		});
		getForumTree().then(async () => {
			await getThreadsData();
			await nextTick();
			let i = dataSourse.ForumTree.findIndex((v, i) => {
				if (v.key === dataSourse.ForumID) {
					return i;
				}
			});
			if (i >= 3) {
				scrollLeft.value = 330;
			}

			if (i >= 8) {
				scrollLeft.value = 500;
			}
		});
	})

	//导航栏内容
	async function getForumTree() {
		let msg = await uni.post("/uc/forums/GetForumTree");
		dataSourse.ForumTree = [{
				id: '',
				title: '全部'
			},
			...msg.data.slice(0, msg.data.length - 1)
		]
	}
	//帖子内容
	async function getThreadsData() {
		let msg = await uni.post("/uc/forums/GetThreads", {
			ForumId: dataSourse.ForumID,
			Page: dataSourse.Page,
			PageSize: dataSourse.PageSize,
		});
		//将获取内容添加至瀑布流
		doList(msg.data);
	}

	function reset() {
		dataSourse.LeftList = [];
		dataSourse.RightList = [],
			dataSourse.letfH = 0;
		dataSourse.rightH = 0;
		dataSourse.Page = 1;
	}
	//导航栏点击
	function onClick(id, Index) {
		dataSourse.ForumID = id;
		index = Index;
		setShare({
			title: '云上埔坪 - 社区',
			path: `/pages/Community/CommunityCommunication?id=${id}`
		});
		reset();
		getThreadsData();
	}

	//下拉刷新
	onPullDownRefresh(() => {
		//清空，重置
		reset();
		//重新获取内容后 停止刷新
		getThreadsData().then(() => {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500);
		})
	})

	//下拉加载
	onReachBottom(() => {
		dataSourse.Page++;
		getThreadsData();
	})

	//瀑布流
	function getHeight(src) {
		return new Promise((resolve, reject) => {
			uni.getImageInfo({
				src: src,
				success: (image) => {
					resolve(image.height / image.width);
				}
			});
		});
	}

	function doList(dataList) {
		let currentIndex = 0;
		const dataListLength = dataList.length;
		// 顺序处理 dataList

		function nextImage() {
			if (currentIndex < dataListLength) {
				const res = dataList[currentIndex];
				getHeight(domain + res.Cover)
					.then((showH) => {
						if (dataSourse.letfH <= dataSourse.rightH) {
							dataSourse.letfH += showH;
							dataSourse.LeftList.push(res);
						} else {
							dataSourse.rightH += showH;
							dataSourse.RightList.push(res);
						}
						currentIndex++;
						nextImage(); // 处理下一个图像
					})
			}
		}
		nextImage()
	}

	//左右滑动切换页面
	const touch = reactive({
		startX: '',
		startY: '',
	})
	//触摸开始
	function touchStart(e) {
		touch.startX = e.changedTouches[0].clientX;
		touch.startY = e.changedTouches[0].clientY;
	}
	//触摸结束
	function touchEnd(e) {
		let deltaX = e.changedTouches[0].clientX - touch.startX;
		let deltaY = e.changedTouches[0].clientY - touch.startY;
		if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {

			if (deltaX > 0 && index > 0) {
				//右滑  页面掉转至左页面
				onClick(dataSourse.ForumTree[index - 1].id, index - 1)
			} else if (deltaX < 0 && index < dataSourse.ForumTree.length - 1) {
				//左滑  页面掉转至右页面
				onClick(dataSourse.ForumTree[index + 1].id, index + 1)
			}

		}
	}
</script>

<style lang="less">
	@item-bg-color: #EBF3F8;

	#community {
		padding: 0 30rpx;

		//完全消除滚动条
		scroll-view ::-webkit-scrollbar {
			display: none;
			width: 0;
			height: 0;
			color: transparent;
		}

		.navigation-bar {
			white-space: nowrap;

			.item-bar {
				display: inline-block;
				text-align: center;
				width: 120rpx;
				font-size: 25rpx;
				line-height: 40rpx;
				margin-right: 50rpx;
			}

			.active {
				width: 120rpx;
				color: #fff;
				border-radius: 20rpx;
				background: url("../../static/communityBar.jpg") 50% 50% / cover;
			}
		}

		.waterfall-container {
			margin: 10rpx 0;
			display: flex;
			justify-content: space-between;
			min-height: calc(100vh - 345rpx);

			.left,
			.right {
				width: calc(50% - 15rpx);

				// width: 330rpx;
				.content-container {
					margin: 20rpx 0;
					width: 100%;
					background-color: @item-bg-color;
					border-radius: 25rpx;

					.content-item {
						position: relative;
						padding: 50rpx 30rpx;
						box-sizing: border-box;
						font-size: 25rpx;

						.content-header {
							display: flex;
							height: 72rpx;

							.avatar {
								width: 53rpx;
								height: 53rpx;
								border-radius: 50%;
								margin: auto 0;
							}

							.creat {
								margin-left: 35rpx;
								flex: 1;

								.author {
									line-height: 36rpx;
								}

								.created-time {
									line-height: 36rpx;
									font-size: 20rpx;
									color: #575757;
								}
							}
						}

						.content-image {
							width: 100%;
							margin: 25rpx 0;
							background-color: #fff;
						}

						.content-text {
							word-wrap: break-word;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							/* 控制最大行数为2 */
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.footer {
							text-align: right;
							color: #818080;
							cursor: pointer;
						}

						.bg-img {
							position: absolute;
							width: 185rpx;
							height: 115rpx;
							bottom: 0;
							right: 0;
						}
					}
				}
			}


		}

	}

	.to-add {
		position: fixed;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: rgb(109, 131, 152);
		bottom: 200rpx;
		right: 50rpx;
		text-align: center;
		font-size: 80rpx;
		color: #fff;
		z-index: 999;
	}
</style>